<template>
    <div class="center"> 
        <ul>
            <!--交互-->
            <li v-for="(item, index) in list"  :style="{borderBottom: item.name == listName? '4px solid rgb(142, 62, 247)' :''}" :key="index" 
            @click="changeItem(item,index)"
            >{{item.title}}</li>
        </ul>
        <!--个人信息渲染-->
        <div class="box" v-if="listName == 'msg'">
            <img :src="user.avatar">
            <ul>
                <li>
                    <span>姓名:</span>
                    <span>{{user.username}}</span>
                </li>
                <li>
                    <span>学校:</span>
                    <span>{{user.school}}</span>
                </li>
                <li>
                    <span>昵称:</span>
                    <span>{{user.nickname}}</span>
                </li>
                <li>
                    <span>性别:</span>
                    <span>{{user.gender}}</span>
                </li>
                <li>
                    <span>密码:</span>
                    <input style="border:none;" type="password" v-model="user.password">
                    <template>
                        <el-button type="text" @click="show = !show">修改</el-button>
                    </template>
                </li>
            </ul>
            <!--表单密码验证框-->
            <el-form :model="ruleForm" :rules="rules"  status-icon  ref="ruleForm" label-width="100px"
            style="width:500px; 
            height:300px;  
            background:#fff; 
            position:fixed; 
            z-index:9; 
            top:200px; 
            left:40%;
            box-shadow:0 0 6px #333; 
            padding-top:60px;"
             class="demo-ruleForm" v-if="show">
                <el-form-item label="旧密码" prop="oldPass">
                    <el-input type="password" style="width:280px" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input style="width:280px;" type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input style="width:280px;" type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="show = !show">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--兑换记录-->
        <div class="box"   v-if="listName == 'record' ">
            <div class="boxRow"  v-for="(item, index) in showRec" :key="index">
                <span>{{item.name}}</span>
                <!--时间处理-->
                <p>{{item.exchangeDate | formDate()}}</p>
                <!-- <p>{{item.exchangeDate | formDate}}</p> -->
            </div>
        </div>
    </div>
</template>
<script>
import { mapState,mapMutations } from "vuex";
import Moment from 'moment'//引入moment时间过滤包

export default ({
    name:'integral',
    data(){
        //表单验证
      let validateOldpass = (rule, value, callback)=>{
            if (this.ruleForm.oldPass  == null ) {
                return callback(new Error('请输入旧密码'));
            }else if(this.ruleForm.oldPass !== this.user.password){
                return callback(new Error('旧密码不正确请重新输入'));
            }else{
               console.log(this.ruleForm.oldPass)
            }
        }
      let validatePass = (rule, value, callback)=>{
            if (this.ruleForm.pass == null) {
                return callback(new Error('请输入密码'));
            }else{
               console.log(this.ruleForm.pass)
            }
        }
      let validatePass2 = (rule, value, callback)=>{
            if (this.ruleForm.checkPass !== this.ruleForm.pass) {
                return callback(new Error('两次输入密码不一致'));
            }else{
               console.log(this.ruleForm.checkPass)
            }
        }
        return{
            // str:Moment(new Date()).format('YYYY-MM-DD hh:mm:ss'),//全局 日期格式化
            listName:'msg',
            list:[
                {name:'msg',title:'个人信息',},
                {name:'record',title:'兑换记录',},
            ],
            user:JSON.parse(localStorage.getItem('user')),
            ruleForm: {},
            show:false,
             rules: {
                oldPass: [
                    { validator: validateOldpass, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            },
        }
    },
    computed:{
         ...mapState ({
            //商品兑换数据
            showRec:state => state.showrecord,
        }),
    },
    filters:{
        //本页面用的时间过滤
        formDate:function(time){
            return Moment(time).format('YYYY-MM-DD hh:mm:ss')
        }
    },
    created(){
        this.showVla()
    },
    methods:{
        ...mapMutations(['showRecord','userLogins']),
        //交互按钮
        changeItem(item){
            this.listName = item.name
            item.show = !item.show
        },
        //提交表单密码验证
        async submitForm() {
             const data = await this.aPut('/user/changePassword',{
                oldPassword:this.ruleForm.oldPass,
                newPassword:this.ruleForm.pass
            });
            //成功弹出框
            if (data) {
                this.$message({
                message: '密码修改成功',
                type: 'success',
                duration: 1000,
                offset: '150'
                })
            }
            this.show = !this.show;
            this.ruleForm={}
        },
        ///商品兑换数据
        async showVla(){
            const data = await this.aGet('/shop/exchangedRecord',{
                id:this.user._id
                }
            );
            this.showRecord(JSON.parse(JSON.stringify(data)))
           if(this.user.gender == 0){
               this.user.gender='男'
           }else{
               this.user.gender='女'
           }
            this.user.gender === 0 ? '男' : '女'
            console.log(this.user.gender)
        }
    }
})
</script>
<style lang="scss">
.center{
    margin-left: 300px;
    img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 2% 0 0 16%;
    }
    .a{
        border-bottom: 4px solid rgb(93, 25, 181);
    }
    & > ul{
        list-style: none;
        font-size: 20px;
        margin-top: 40px;
        margin-left: 40px;
        display: inline-block;
        li{
            display: inline-block;
            width: 110px;
            text-align: center;
        }
    }
    .box{
        width: 98%;
        margin-left: 1%;
        margin-top: 20px;
        height: 600px;
        border: 1px solid #dbdbdb;
        overflow: scroll;
        ul{
            list-style: none;
            display: inline-block; 
            width: 400px;
            height: 200px;
            margin: 100px 0 0 20px;
            li{
                width: 190px;
                display: inline-block; 
                font-size: 18px;
                height: 60px;
                padding: 2px;
                line-height: 60px;
                color: #656565;
            }
        }
        .boxRow{
            width: 96%;
            display: flex;
            justify-content: space-between;
            height: 80px;
            line-height: 80px;
            font-size: 12px;
            margin: 0 auto;
            border-bottom: 2px solid rgb(196, 196, 196);
        }
    }
}
</style>
